<template>
  <div class="dashboard-container">
    <img :src="imageSrc" width="100%" height="auto" alt="Dashboard Image">
  </div>
</template>

<script>
import { getIndexData } from "@/api/index.js";

export default {
  name: 'Dashboard',
  data() {
    return {
      imageSrc: '',
    };
  },
  async mounted() {
    try {
      const result = await getIndexData();
      if (result && result.imageUrl) {
        this.imageSrc = result.imageUrl;
      } else {
        console.warn('Image URL not found in API response');
      }
    } catch (error) {
      console.error('Failed to fetch index data', error);
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 30px;
}
</style>
